<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    createdAt: "2022-01-01 00:00:00",
    customerType: "新客",
    amount: "98元",
    orderCount: "1",
    orderTime: "2022-01-01 00:00:00",
    orderInfo: {
      realName: "张三",
      phone: "13888888888",
    },
  },
  {
    createdAt: "2022-01-01 00:00:00",
    customerType: "新客",
    amount: "98元",
    orderCount: "1",
    orderTime: "2022-01-01 00:00:00",
    orderInfo: {
      realName: "张三",
      phone: "13888888888",
    },
  },
  {
    createdAt: "2022-01-01 00:00:00",
    customerType: "老客",
    amount: "--",
    orderCount: "--",
    orderTime: "--",
  },
  {
    createdAt: "2022-01-01 00:00:00",
    customerType: "新客",
    amount: "98元",
    orderCount: "1",
    orderTime: "2022-01-01 00:00:00",
    orderInfo: {
      realName: "张三",
      phone: "13888888888",
    },
  },
  {
    createdAt: "2022-01-01 00:00:00",
    customerType: "新客",
    amount: "98元",
    orderCount: "1",
    orderTime: "2022-01-01 00:00:00",
    orderInfo: {
      realName: "张三",
      phone: "13888888888",
    },
  },
]);

const modalVisible = ref(false);
</script>

<template>
  <umi-container bg-color="#f2f2f2" min-height="100%" padding="16px" :gap="16">
    <umi-breadcrumb :items="['客户管理', '客户列表']"></umi-breadcrumb>
    <umi-row :gutter="10">
      <umi-col :span="6">
        <umi-card :border="false">
          <umi-statistic value="1999" title="客户总数(个)"></umi-statistic>
        </umi-card>
      </umi-col>
      <umi-col :span="6">
        <umi-card :border="false">
          <umi-statistic value="1999" title="新客(个)"></umi-statistic>
        </umi-card>
      </umi-col>
      <umi-col :span="6">
        <umi-card :border="false">
          <umi-statistic value="1999" title="老客(个)"></umi-statistic>
        </umi-card>
      </umi-col>
      <umi-col :span="6">
        <umi-card :border="false">
          <umi-statistic value="1999" title="下单客户(个)"></umi-statistic>
        </umi-card>
      </umi-col>
    </umi-row>
    <umi-search-card>
      <umi-row :gutter="16">
        <umi-col :span="8">
          <umi-form-item label="微信昵称">
            <umi-input placeholder="请输入微信昵称"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="用户编号">
            <umi-input placeholder="请输入用户编号"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="下单时间">
            <umi-datepicker-range></umi-datepicker-range>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="报名姓名">
            <umi-input placeholder="请输入报名人的真实姓名"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="联系电话">
            <umi-input placeholder="请输入报名人的联系电话"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="客户类型">
            <umi-select>
              <umi-option value="1">全部</umi-option>
              <umi-option value="2">新客</umi-option>
              <umi-option value="2">老客</umi-option>
            </umi-select>
          </umi-form-item>
        </umi-col>
      </umi-row>
    </umi-search-card>
    <umi-card :border="false">
      <umi-space style="margin-bottom: 16px" :size="10">
        <umi-button type="primary">批量设置老客</umi-button>
        <umi-button type="primary">批量设置新客</umi-button>
      </umi-space>
      <umi-table :data="dataList" :row-selection="{ type: 'checkbox' }">
        <template #columns>
          <umi-table-column title="微信资料" slot-name="wxinfo" :width="200"></umi-table-column>
          <umi-table-column title="客户类型" data-index="customerType"></umi-table-column>
          <umi-table-column title="交易金额" data-index="amount"></umi-table-column>
          <umi-table-column title="交易笔数" data-index="orderCount"></umi-table-column>
          <umi-table-column title="最新下单信息" slot-name="orderInfo" :width="200"></umi-table-column>
          <umi-table-column title="最新下单时间" data-index="orderTime" :width="160"></umi-table-column>
          <umi-table-column title="加入时间" data-index="createdAt" :width="160"></umi-table-column>
          <umi-table-column title="操作" slot-name="action" :width="100"></umi-table-column>
        </template>
        <template #amount="{ record }">
          <umi-text-price>{{ record.amount }}</umi-text-price>
        </template>
        <template #action>
          <umi-space :size="10">
            <umi-button type="primary" @click="$router.push({ name: 'CustomerDetail' })">查看详情</umi-button>
          </umi-space>
        </template>
        <template #wxinfo>
          <umrp-user-info :phone="false"></umrp-user-info>
        </template>
        <template #orderInfo="{ record }">
          <umi-space direction="vertical" :size="6" v-if="record.orderInfo">
            <umi-text color="gray">报名人：{{ record.orderInfo.realName }}</umi-text>
            <umi-text color="gray">联系电话：{{ record.orderInfo.phone }}</umi-text>
          </umi-space>
          <umi-text v-else>--</umi-text>
        </template>
      </umi-table>
    </umi-card>
    <umi-modal v-model:visible="modalVisible">
      <umi-form>
        <umi-form-item label="核销码">
          <umi-input placeholder="请输入核销码"></umi-input>
        </umi-form-item>
      </umi-form>
    </umi-modal>
  </umi-container>
</template>
